<template>
  <!-- 总容器 -->
  <div class="wrapper">
    <header>
      <font-awesome-icon :icon="['fas', 'chevron-left']" onclick="history.go(-1)"/>
      <p>请您选择体检机构</p>
      <div></div>
    </header>
    <div class="top-ban"></div>

    <!-- 添加搜索框和按钮 -->
    <div class="search-bar">
      <input type="text" v-model="searchQuery" placeholder="搜索体检机构..."/>
      <button @click="filterHospitals">搜索</button>
    </div>

    <ul class="hospital">
      <li v-for="(hospital, index) in filteredHospitals" :key="index">
        <h3 @click="navigateToSetmeal(hospital.hpId)">
          {{ hospital.name }}
          <font-awesome-icon :icon="['fas', 'chevron-right']" />
        </h3>
        <div class="hospital-info">
          <img :src="hospital.picture" alt="Hospital Image">
          <table>
            <tr>
              <td>营业时间:</td>
              <td>{{ hospital.businessHours }}</td>
            </tr>
            <tr>
              <td>采血截止:</td>
              <td>{{ hospital.deadline }}</td>
            </tr>
            <tr>
              <td>电话:</td>
              <td>{{ hospital.telephone }}</td>
            </tr>
            <tr>
              <td>地址:</td>
              <td>{{ hospital.address }}</td>
            </tr>
          </table>
        </div>
        <div class="about">
          <p>
            <i class="fa fa-phone"></i>
            联系我们
          </p>
          <p>
            <i class="fa fa-map-marker"></i>
            查找位置
          </p>
        </div>
      </li>
    </ul>

    <div class="bottom-ban"></div>
    <Footer></Footer>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
import Footer from '@/components/Footer.vue';
import { reactive, ref } from 'vue';
import axios from "../plugin/axiosInstance";

const hospitals = reactive([]);
const filteredHospitals = reactive([]);
//搜索框内容
const searchQuery = ref("");

const navigateToSetmeal = (hpId) => {
  router.push({ path: '/setmeal', query: { hpId: hpId } });
}

const init = () => {
  getHospitals();
}

const getHospitals = () => {
  axios.post('/hospital/getAll',{
    key : searchQuery.value
  }).then(res => {
    if (res.data.code == 200) {
      hospitals.splice(0, hospitals.length, ...res.data.data);
      filteredHospitals.splice(0, filteredHospitals.length, ...res.data.data);
    } else {
      alert("code!=200 发生了错误！");
    }
  })/* .catch(e => {
        alert(e);
    }) */;
}

/*
 搜索事件
 */
const filterHospitals = () => {

  console.log(searchQuery.value)

  getHospitals();
}

init();
</script>

<style scoped>
@import "../assets/css/hospital.css";

.search-bar {
  padding: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-bar input {
  width: 70%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}

.search-bar button {
  padding: 8px 16px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.search-bar button:hover {
  background-color: #0056b3;
}
</style>
